<template>

<div >
   <el-button @click="dialogVisible=true">上传文件</el-button>

  <div v-if="AffairsData.length<=0">
      <el-empty description="你还没上传任何文件呢"></el-empty>
      </div>

    <div v-for="item in AffairsData" :key="item.id">

        备注：{{item.remarks}}- <a :href="item.affairs_file">下载</a>--
             <el-popconfirm title="你确定要删除这条信息吗？" @confirm="handleDelete(item.id)">
          <template #reference>
        <a  class="deleteV" href="javascript:void(0);">删除</a>
          </template>
        </el-popconfirm>
    </div>

        <el-dialog  :visible.sync="dialogVisible"  title="添加文件" width="20%"    :modal-append-to-body='false'>
     <el-form  :model="formWork" label-width="80px">
       <el-form-item label="备注">
         <el-input v-model="formWork.remarks" ></el-input>
          </el-form-item>

           <el-form-item label="文件">
        <el-upload ref="upload" action="http://localhost:2001/files/upload" :on-success="filesUploadSuccess" >
            <el-button  type="primary">点击上传</el-button>
            </el-upload>
       </el-form-item>
     </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="addWork"
        >确定</el-button
        >
      </span>
      </template>
    </el-dialog>
</div>

</template>

<script>
import { getAffair, addSendAffairsWork, deleteformWork } from '@/api/affairs'
import { mapGetters } from 'vuex'

export default {
  props: {
    Refdata: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      AffairsData: '',
      dialogVisible: false,
      formWork: {
        affairsFile: ''
      }
    }
  },
  methods: {
    fetchAffair () {
      getAffair(this.Refdata.affairs_id, this.user.id).then(response => {
        const { data } = response
        this.AffairsData = data
        console.log(this.AffairsData)
      })
    },
    addWork () {
      this.formWork.username = this.user.username
      this.formWork.affairsId = this.Refdata.affairs_id
      this.formWork.userId = this.user.id
      console.log(this.formWork)
      try {
        addSendAffairsWork(this.formWork).then(res =>
          this.$message.success('添加成功'),
        this.fetchAffair(),
        this.dialogVisible = false,
        this.formWork = {},
        this.$refs.upload.clearFiles()
        )
      } catch (e) {
        this.$buefy.toast.open({
          message: `创建失败. ${e}`,
          type: 'is-danger'
        })
      }

      // window.location.reload()
    },
    filesUploadSuccess (res) {
      console.log(res)
      this.formWork.affairsFile = res.data
    },
    handleDelete (id) {
      try {
        deleteformWork(id).then(value => {
          this.$message.success('删除成功')
          this.fetchAffair()
        })
      } catch (e) {
        this.$message.error('删除失败')
      }
    }

  },
  created () {
    // console.log(this.Refdata.affairs_id)
    // console.log(this.user.alias)
    console.log(this.Refdata)
  },
  components: {},
  async mounted () {
    this.fetchAffair()
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  }
}
</script>

<style lang="less" scoped>
.deleteV{
  color: red !important;
  font-size: .133333rem !important;
}
</style>
